<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue讲解</title>
<link href="./css/base.css" rel="stylesheet" type="text/css"/>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

</head>
<body>
<div class="row">
    <a href="https://blog.csdn.net/qq_45954420/article/details/123315977" target="_blank">Vue--条件渲染</a>
    <a href="https://www.cnblogs.com/huronghua/p/12056292.html" target="_blank">vue条件渲染</a>

</div>
<div class="H20"></div>
<div id="app" class="t24">
    <input type="button" v-model="a" @click="a++" class="button"></input>
    <div class="box">
        v-if
        <div id='if1' v-if="a==1" >条件:a=={{a}}</div>
        <div id='if2' v-else-if="a==2" >条件:a=={{a}}</div>
        <div id='if' v-else >条件:a=={{a}}</div>
    </div>
    <div>
        v-show
        <div id='show' v-show="a==4">条件:a=={{a}}</div>
    </div>
    
</div>
 
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
            a:0
        }
        
    })
</script>
</body>
</html>